<template>
    <div id="main">
        <div id="left">
            <div id="L-content1" class="title">项目概况</div>
            <div id="L-content2">
                <div class="L-elem1">
                    <p class="text1">项目地块总数</p>
                    <p class="text2">29</p>
                </div>
                <div class="L-elem1">
                    <p class="text1">总包单位数</p>
                    <p class="text2">6</p>
                </div>
                <div class="L-elem2">
                    <p class="text1">在线总面积</p>
                    <p class="text3">243.15万m²</p>
                </div>
                <div class="L-elem2">
                    <p class="text1">竣工面积</p>
                    <p class="text4">32.12万m²</p>
                </div>
            </div>
            <div id="L-content3" class="title">视频监控</div>
            <div id="L-content4">
                <img src="../../assets/images/image3.png">
                <div id="inform1" @mouseover="changeActive($event)" @mouseout="removeActive">
                    <p>建工二建</p>
                    <p>地块数：5，</p>
                    <p>监控数：4</p>
                </div>
                <div id="inform2" @mouseover="changeActive($event)" @mouseout="removeActive">
                    <p>上海宝治</p>
                    <p>地块数：8，</p>
                    <p>监控数：8</p>
                </div>
                <div id="inform3" @mouseover="changeActive($event)" @mouseout="removeActive">
                    <p>建工一建</p>
                    <p>地块数：6，监控数：4</p>
                </div>
                <div id="inform4" @mouseover="changeActive($event)" @mouseout="removeActive">
                    <p>中建八局</p>
                    <p>地块数：12，</p>
                    <p>监控数：8</p>
                </div>
                <div id="inform5" @mouseover="changeActive($event)" @mouseout="removeActive">
                    <p>建工四建</p>
                    <p>地块数：10，监控数：8</p>
                </div>
            </div>
            <img src="../../assets/images/image1.png" class="img">
        </div>
        <div id="center">
            <div id="DataDisplay" v-if="versionTotal">
                <p v-for="(item, $index) in appVersionName" :key="$index">{{ item }}</p>
            </div>
            <div id="line_chart"></div>
        </div>
        <div id="right">
            <div id="R-content1" class="title">员工性别结构</div>
            <div id="R-content4">
                <div id="pieChart2"></div>
            </div>
            <div id="R-content2" class="title">通知公告</div>
            <div id="R-content3">
                <p>本周将进行工地安全大检查，请各位管理人员提前做好准备，确保所有安全设备和措施符合标准。请及时更新安全记录，确保工人知晓相关流程。</p>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            versionTotal: false,
            appVersionName: [],
            charts: "",
            opinionData: ["1720", "1731", "1736", "1729", "1746", "1759"],
            status: [50, 50],
            pieData: []
        }
    },
    methods: {
        drawLine(id) {
            // 初始化折线图
            this.charts = echarts.init(document.getElementById(id));
            // 设置折线图数据和样式
            this.charts.setOption({
                title: {
                    left: "3%",
                    top: "5%",
                    text: "员工人数                                     总数" + this.opinionData[5], // 自定义
                    textStyle: {
                        fontSize: '21px'
                    }
                },

                tooltip: {
                    trigger: "axis",
                },

                legend: {
                    align: "right",
                    left: "3%",
                    top: "15%",
                    data: ["近半个月"], // 自定义
                },

                grid: {
                    top: "30%",
                    left: "5%",
                    right: "5%",
                    bottom: "5%",
                    containLabel: true,
                },

                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },

                // 自定义：设置x轴刻度
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true,
                    },
                    // 自定义标签
                    data: ["5-1", "5-4", "5-7", "5-10", "5-13", "5-16"],
                },

                // 自定义：设置y轴刻度
                yAxis: {
                    type: "value",
                    boundaryGap: true,
                    // splitNumber: ,
                    interval: 20,
                    min: 1700,
                    max: 1780
                },

                // 设置数据
                series: [
                    {
                        name: "近半个月", // 自定义
                        type: "line",
                        stack: "总量", // 自定义
                        data: this.opinionData, // 自定义
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgb(255,200,213)",
                                    },
                                    {
                                        offset: 1,
                                        color: "#ffffff",
                                    },
                                ],
                                global: false,
                            },
                        },
                        itemStyle: {
                            color: "rgb(255,96,64)",
                            lineStyle: {
                                color: "rgb(255,96,64)",
                            },
                        },
                    },
                ],
            });
        },
        // 鼠标移入
        changeActive(e) {
            // 更改div的显示属性
            this.versionTotal = true;
            // 给需要设置的内容赋值
            // while
            this.appVersionName.push(e.currentTarget.innerText);
        },
        // 鼠标移出
        removeActive() {
            // 设置不显示
            this.versionTotal = false;
            this.appVersionName = []
        },
        drawPie(id) {
            // 初始化饼状图
            this.charts = echarts.init(document.getElementById(id));
            // 设置饼状图数据和样式
            this.charts.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom',
                    left: '100px',
                    color:'white'
                },
                series: [
                    {
                        name: '性别',
                        type: 'pie',
                        radius: ['60%'],
                        data: this.pieData,
                        label: {
                            "normal": {
                                "show": true,
                                "textStyle": {
                                    "fontSize": 13
                                }
                            },
                            "emphasis": {
                                // "show": true
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',

                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        // '#fc8251',
                                        // '#5470c6',
                                        // '#9A60B4',
                                        '#f8e55e',
                                        // '#f9c956',
                                        '#81d5ae'
                                    ];
                                    return colorList[colors.dataIndex];
                                }
                            },
                        }
                    }
                ]
            }, true);
        },
        loadPost() {
            this.$axios.get(this.$httpUrl + '/staff/countSum').then(res => {
                this.opinionData[5] = res.data.toString();
            })
            this.$axios.get(this.$httpUrl + '/staff/countSex').then(res => {
                for (var i = 0; i < res.data.length; i++) {
                    this.pieData.push({
                        name: res.data[i]['sex'],
                        value: res.data[i]['value'],
                    })
                }
            })
        },
    },
    mounted() {
        this.$nextTick(function () {
            this.loadPost();
            setTimeout(() => {
                this.drawLine("line_chart")
                this.drawPie("pieChart2")
            }, 100)

        })
    }
}
</script>
<style scoped>
@import '../../assets/css/HomeMain.css';
</style>